

// 导入 react 基础库，React 的核心模块
import React, { Component } from 'react';
// ReactDOM 关于 React 处理 DOM 用的  D document  Oobject  Mmodel
import ReactDOM from 'react-dom/client';


const root = ReactDOM.createRoot(
  // 获取 id 为 root 的标签
  document.getElementById('root') as HTMLElement
);


function Header() {
  return <>
    <header> 头部内容 </header>
  </>
}

const Content = () => {
  return <main>主题内容</main>
}

function Footer() {
  return <footer>页脚</footer>
}


// Component 是 react 中组件的基类
class App extends Component {

  // 组件嵌套
  render() {
    return <>
      <Header />
      <Content />
      <Footer></Footer>
    </>
  }
}


// 入口的根元素渲染 app 组件
root.render(
  <App />
);